<template>
  <el-header class="layout-header-container d-flex justify-content-between align-items-center p-3">
    <!-- 左侧 logo 和 标题区域 -->
    <div class="layout-header-left d-flex align-items-center user-select-none">
      <!-- 标题 -->
      <h4 class="layout-header-left-title ml-3" v-if="user.userRole === 0">送水公司后台管理系统</h4>
      <h4 class="layout-header-left-title ml-3" v-if="user.userRole === 1">送水员工系统</h4>
      <h4 class="layout-header-left-title ml-3" v-if="user.userRole === 2">送水公司客户系统</h4>
    </div>

    <!-- 右侧按钮区域 -->
    <div class="layout-header-right">
      <el-button type="info" @click="logout">退出登录</el-button>
    </div>
  </el-header>
</template>


<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['user', 'token']),
  },
  data() {
    return {

    };
  },
  created() {
    console.log('User from Vuex Store:', this.user);
  },
  methods: {
    logout() {
      let m = this;
      if (confirm("确定退出吗？")) {
        m.$store.commit('logout');
        m.$router.push('/');
      }
    }
  }
}
</script>

<style lang="less" scoped>
.layout-header-container {
  height: 60px;
  border-bottom: 1px solid #eaeaea;
}

.layout-header-left-img {
  height: 50px;
}
</style>